<template>
  <div style="display: flex;">
    <asideTabs :searchVocDetails="searchVocDetails" :vocId="vocId" :vocNext="vocNext" :path="path"></asideTabs>
    <div class="bacterias">
    <div class="g-main">
      <div class="bacterias-content">
        <div class="page-title">
          <P
            >降解菌群降解的物质为<span style=" color: rgba(0, 84, 190, 1);"><span v-html="formatting(vocNext)"></span>{{
              searchVocDetails
            }}</span></P
          >
        </div>
        <div class="content" v-loading="loading"
    element-loading-text="数据加载中"
    element-loading-spinner="el-icon-loading">
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{
              background: '#eef1f6',
              color: 'black',
            }"
            border
            :cell-style="{ height: '35px', padding: '0' }"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <div class="expand-all">
                  <div class="expand-title">降解效率</div>
                  <div class="my-table">
                    <table width="1000">
                      <tr>
                        <th>降解浓度</th>
                        <th>降解浓度单位</th>
                        <th>降解时间</th>
                        <th>降解时间单位</th>
                        <th>降解效率(%)</th>
                      </tr>
                      <tr
                        v-for="(contentt, a) in props.row.efficiency"
                        :key="a + '213213'"
                      >
                        <!-- <td
                          v-for="(key, value, index) in contentt"
                          :key="index + '678'"
                        >
                          <span>{{ key }}</span>
                        </td> -->
                        <td>
                          <span>{{ contentt.degConc }}</span>
                        </td>
                        <td>
                          <span>{{ contentt.degConcunit }}</span>
                        </td>
                        <td>
                          <span>{{ contentt.degTime }}</span>
                        </td>
                        <td>
                          <span>{{ contentt.degTimeunit }}</span>
                        </td>
                        <td>
                          <span>{{ contentt.degEffi }}</span>
                        </td>
                      </tr>
                      <tr v-if="!props.row.efficiency[0]">
                        <td colspan="5">暂无数据</td>
                      </tr>
                    </table>
                  </div>
                </div>
                <div class="expand-all">
                  <div class="expand-title">群落结构</div>
                  <div class="et-p">
                    <span>{{ props.row.structure }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="降解物质" prop="formulaPlain">
        </el-table-column> -->
            <el-table-column label="群落菌群类别" prop="l3name">
            </el-table-column>
            <el-table-column label="群落菌群英文名" prop="nameEn">
            </el-table-column>
            <el-table-column label="群落菌群中文名" prop="nameCn">
            </el-table-column>
            <el-table-column label="链接名" prop="refText"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
  </div>

</template>

<script>
// import { tableOption } from "../const/degrading_bacterias";
import { formatting } from "@/api/formatVoc";
import asideTabs from "@/components/AsideTabs"
export default {
  name: "bacteriaView",
  components:{asideTabs},
  data() {
    return {
      tableData: [
        {
          // formulaPlain: "12987122",
          l3name: "降解菌群名",
          nameEn: "中文名",
          nameCn: "英文名",
          refText: "链接名",
          indraw: "肉汤",
          //群落结构
          structure:
            "微黄分支杆菌(Mycobacterium gilvum)CP13和绿色木霉GIM3 .141",
          //降解效率,数组
          efficiency: [
            {
              degConc: "25",
              degConcunit: "mg/L",
              degTime: "3",
              degTimeunit: "h",
              degEffi: "22%",
            },
            {
              degConc: "25",
              degConcunit: "mg/L",
              degTime: "3",
              degTimeunit: "h",
              degEffi: "22%",
            },
            {
              degConc: "25",
              degConcunit: "mg/L",
              degTime: "3",
              degTimeunit: "h",
              degEffi: "22%",
            },
          ],
        },
      ],
      searchVocDetails: "",
      vocId: "",
      vocNext:"",
      path: 'bacterias'
    };
  },
  mounted() {
    (this.searchVocDetails = this.$route.query.searchVocDetails),
      (this.vocId = this.$route.query.vocId);
      this.vocNext = this.$route.query.vocNext;
    // axios.get('http://localhost:9999/vocs/degrabact/1').then((res)=>{
    //   this.tableData = res.data.data;
    //   console.log(res.data.data)
    // })
  },
  methods: {
    pageto(row) {
      // console.log(row, column, cell, event)
      console.log(row, 111111111);
      this.bacteriaAgentDialog = true;
    },
    //链接中跳转函数
    gotoNewpage(str,radio) {
      let path = str;
      //设置同一个大气和催化反应转换
      this.radio = radio;
      this.$router.push({
        path: path,
        query: {
          searchVocDetails: this.searchVocDetails,
          vocId: this.vocId,
          radio: this.radio,
          vocNext: this.vocNext,
        },
      });
    },
    //格式化处理
    formatting(str){
      return formatting(str);
    },
  },
};
</script>

<style scoped lang="scss">
@import "../css/common.scss";
.bacterias {
  width: 90%;
  .bacterias-content {
    margin-left: 0px;

  }

  .bacteria-title {
    text-align: left;
  }
  .title {
    // margin-top: 15px;
    // margin-bottom: 15px;
    font-size: 20px;
  }
  .table {
    margin-top: 10px;
  }
  .small {
    // text-align: left;
    font-size: 10px;
    vertical-align: super;
  }
  .contentp {
    font-style: 19px;
  }
  .my-table {
    // width: 100%;
    // position: relative;
    // top: -40px;
    margin-left: 55px;
    text-align: left;
  }
  .my-table > table {
    margin: auto;
    margin-top:10px;
    td {
      height: #{$second_line_height}px;
      text-align: center;
    }
    th {
      // 里面的表头高度
      width: 20%;
      // height: 30px;
      text-align: center;
      padding: #{$second_table_height}px;
    }
  }
  .expand-title {
    text-align: left;
    margin-top: 20px;
    // font-size: 18px;
    margin-bottom: 20px;
    margin-left: 60px;
    font-weight: 550;
    color: #606266;
  }
  .et-p {
    text-align: left;
    // position: relative;
    // top: -39px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 57px;
  }
  .expand-all {
    text-align: left;
    width: 1300px;
    margin-left: 10px;
    display: flex;
    justify-content: stretch;
  }
  .page-title p {
    text-align: left;
    font-size: #{$first_font_size};
    font-weight: #{$first_font_weight};
    margin-top: #{$first_titile_top}px;
    margin-left: #{$first_titile_left}px;
    margin-bottom: #{$first_titile_bottom}px;
  }
  table {
    border-collapse: collapse;
    padding: 2px;
  }
  table,
  table tr th,
  table tr td {
    border-bottom: 1px solid #eef1f6;
  }
  table tr th {
    background-color: #eef1f6;
  }
  .content {
    text-align: left;
    font-size: #{$second_font_size};
    font-weight: #{$second_font_weight};
    margin-top: #{$second_titile_top}px;
    margin-left: #{$second_titile_left}px;
    margin-bottom: #{$second_titile_bottom}px;
  }
  .my-table-p {
    margin-left: 100px;
    width: 1000px;
    font-size: #{$third_font_size};
  }
  .mt-p {
    text-align: center;
    font-size: 17px;
  }
  // 表头高度修改
::v-deep .el-table__header tr,
::v-deep .el-table__header th{
  // height: 10px;
  padding: #{$first_table_height}px;
}
// 表头高度修改结束
}
//相关链接
.link-ul li{
    list-style-type: square;
    width: 90%;
    text-align: left;
    color: rgba(0, 84, 190, 1);
    font-size: #{$third_font_size};
    font-weight: #{$third_font_weight};
    margin-top: #{$third_titile_top}px;
    margin-left: #{$third_titile_left}px;
    margin-bottom: #{$third_titile_bottom}px;
    cursor: pointer;
  }
  .link-title{
    text-align: left;
    font-size: #{$first_font_size};
    font-weight: #{$first_font_weight};
    margin-top: #{$first_titile_top}px;
    margin-left: #{$first_titile_left}px;
    margin-bottom: #{$first_titile_bottom}px;
  }
</style>
